<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>combogrid</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/SyntaxHighlighter.css" />

<script type="text/javascript" src="js/shCore.js"></script>
<script type="text/javascript" src="js/shBrushJScript.js"></script>
<script type="text/javascript" src="js/shBrushXml.js"></script>
</head>
<body style="text-align:left">
<div style="padding:10px">

<h3>ComboGrid</h3>
<p>Extend from $.fn.combo.defaults and $.fn.datagrid.defaults. Override defaults with $.fn.combogrid.defaults.</p>
<img src="images/combogrid.png">

<h4>Dependencies</h4>
<ul>
	<li>combo</li>
	<li>datagrid</li>
</ul>

<h4>Usage</h4>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-xml"><li class="alt"><span><span class="tag">&lt;</span><span class="tag-name">select</span><span>&nbsp;</span><span class="attribute">id</span><span>=</span><span class="attribute-value">"cc"</span><span>&nbsp;</span><span class="attribute">name</span><span>=</span><span class="attribute-value">"dept"</span><span>&nbsp;</span><span class="attribute">style</span><span>=</span><span class="attribute-value">"width:250px;"</span><span class="tag">&gt;</span><span class="tag">&lt;/</span><span class="tag-name">select</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li></ol></div><textarea class="html" name="code-combogrid" style="display: none;">	&lt;select id="cc" name="dept" style="width:250px;"&gt;&lt;/select&gt;
</textarea>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-xml"><li class="alt"><span><span class="tag">&lt;</span><span class="tag-name">input</span><span>&nbsp;</span><span class="attribute">id</span><span>=</span><span class="attribute-value">"cc"</span><span>&nbsp;</span><span class="attribute">name</span><span>=</span><span class="attribute-value">"dept"</span><span>&nbsp;</span><span class="attribute">value</span><span>=</span><span class="attribute-value">"01"</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li></ol></div><textarea class="html" name="code-combogrid" style="display: none;">	&lt;input id="cc" name="dept" value="01"&gt;
</textarea>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-c"><li class="alt"><span><span>$(</span><span class="string">'#cc'</span><span>).combogrid({&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;panelWidth:450,&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;value:<span class="string">'006'</span><span>,&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;idField:<span class="string">'code'</span><span>,&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;textField:<span class="string">'name'</span><span>,&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;url:<span class="string">'datagrid_data.json'</span><span>,&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;columns:[[&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{field:<span class="string">'code'</span><span>,title:</span><span class="string">'Code'</span><span>,width:60},&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{field:<span class="string">'name'</span><span>,title:</span><span class="string">'Name'</span><span>,width:100},&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{field:<span class="string">'addr'</span><span>,title:</span><span class="string">'Address'</span><span>,width:120},&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{field:<span class="string">'col4'</span><span>,title:</span><span class="string">'Col41'</span><span>,width:100}&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;]]&nbsp;&nbsp;</span></li><li class=""><span>});&nbsp;&nbsp;</span></li></ol></div><textarea class="js" name="code-combogrid" style="display: none;">	$('#cc').combogrid({
		panelWidth:450,
		value:'006',
	 
		idField:'code',
		textField:'name',
		url:'datagrid_data.json',
		columns:[[
			{field:'code',title:'Code',width:60},
			{field:'name',title:'Name',width:100},
			{field:'addr',title:'Address',width:120},
			{field:'col4',title:'Col41',width:100}
		]]
	});
</textarea>

<h4>Properties</h4>
<p>The properties extend from combo and datagrid, below is the added properties for combogrid.</p>
<table class="doc-table">
<tbody><tr>
<th><strong>Name</strong></th>
<th><strong>Type</strong></th>

<th><strong>Description</strong></th>
<th><strong>Default</strong></th>
</tr>
<tr>
<td>loadMsg</td>
<td>string</td>
<td>The message displayed when datagrid load remote data.</td>
<td>null</td>
</tr>
<tr>
<td>idField</td>

<td>string</td>
<td>The id field name.</td>
<td>null</td>
</tr>
<tr>
<td>textField</td>
<td>string</td>
<td>The text field to be displayed in textbox.</td>
<td>null</td>
</tr>

<tr>
<td>mode</td>
<td>string</td>
<td>Defines how to load datagrid data when text changed. Set to 'remote' if the combogrid loads from server.</td>
<td>local</td>
</tr>
<tr>
<td>filter</td>
<td>function(q, row)</td>
<td>Defines how to select the local data when 'mode' setted to 'local'. Return true to select the row.</td>

<td></td>
</tr>
</tbody></table>

<h4>Events</h4>
<p>The events extend from combo and datagrid.</p>

<h4>Methods</h4>
<p>The methods extend from combo, below is the added or overriden methods for combogrid.</p>
<table class="doc-table">
<tbody><tr>
<th><strong>Name</strong></th>
<th><strong>Parameter</strong></th>
<th><strong>Description</strong></th>
</tr>
<tr>
<td>options</td>
<td>none</td>
<td>Return the options object.</td>
</tr>

<tr>
<td>grid</td>
<td>none</td>
<td>Return the datagrid object.</td>
</tr>
<tr>
<td>setValues</td>
<td>values</td>
<td>Set the component value array.</td>
</tr>
<tr>

<td>setValue</td>
<td>value</td>
<td>Set the component value.</td>
</tr>
<tr>
<td>clear</td>
<td>none</td>
<td>Clear the component value.</td>
</tr>
</tbody></table>

</div>	
</body>
</html>